<template>
  <div>
    <el-button
      v-if="showExpand"
      link
      type="primary"
      @click="showItem = !showItem"
    >
      {{
        showItem ? $t("business.common.pack_up") : $t("business.common.expand")
      }}
    </el-button>
    <div v-if="showItem">
      <div
        v-for="(value, key, index) in valueObj"
        :key="index"
        class="kv-row-tag"
      >
        <el-tag v-if="value.length + key.length < 50" type="info" size="small">
          {{ key }} = {{ value }}
        </el-tag>
        <el-tooltip
          v-if="value.length + key.length >= 50"
          :content="value"
          placement="top"
          :popper-style="{ maxWidth: '600px' }"
        >
          <el-tag type="info" size="small">
            {{ (key + "=" + value).substring(0, 50) + "..." }}
          </el-tag>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

type Prop = {
  valueObj: Record<string, any>;
};

const props = defineProps<Prop>();

const showItem = ref(true);
const showExpand = ref(false);

onMounted(() => {
  if (props.valueObj) {
    showExpand.value = Object.keys(props.valueObj).length > 5;
    showItem.value = !showExpand.value;
  }
});
</script>

<style scoped lang="scss">
.kv-row-tag {
  width: 100%;
}
</style>
